<!--
 * @Author: 岸舟
 * @Date: 2020-09-21 10:08:19
 * @LastEditors: 岸舟
 * @LastEditTime: 2020-09-23 20:18:03
 * @Description: 
-->
<template>
<div class="myHeader">
    <div class="msgBox">
        <div class="left-box">
            <!-- 展开关闭小图标 -->
            <div class="img-box">
                <img class="img msg-img" title="切换菜单" src="../../assets/img/public/展开.png" @click="switchIsCollapse" />
            </div>
            <!-- 搜索框 -->
            <!--<div class="search-inp">
                <input type="search" class="inp" v-model="searchContent" placeholder="Search" />
            </div> -->
        </div>
        <div class="right-box">
            <!-- 通知消息小图标 -->
            <div class="img-box">
                <img class="img msg-img" title="通知" src="../../assets/img/public/提示.png" />
            </div>
            <!-- 全屏小图标 -->
            <div class="img-box">
                <img class="img full-img" src="../../assets/img/public/全屏.png" title="全屏" @click="clickFullscreen" />
            </div>
            <!-- 用户头像 -->
            <div class="user-img-box" @click="goPage">
                <el-avatar :src="userImgUrl" class="img user-img" title="个人中心"></el-avatar>
            </div>
        </div>
    </div>
    <!-- 面包屑 -->
    <div class="navBox">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <template v-for="item in nowBreadcrumb">
                <el-breadcrumb-item :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item>
            </template>
        </el-breadcrumb>
    </div>
</div>
</template>

<script>
import screenfull from "screenfull";
import {
    createNamespacedHelpers
} from "vuex";

const {
    mapMutations,
    mapState
} = createNamespacedHelpers("publicStore");

export default {
    data() {
        return {
            searchContent: "",
            userImgUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
            isfull: false,
        };
    },
    methods: {
        ...mapMutations(["switchIsCollapse", "setNowBreadcrumb"]),
        //实现了网页全屏切换，需下载依赖：npm i screenfull
        clickFullscreen() {
            if (!screenfull.isEnabled) {
                this.$message({
                    message: "you browser can not work",
                    type: "warning",
                });
                return false;
            }
            screenfull.toggle();
        },
        goPage() {
            this.$router.push("/system/UserCenter/modData")
        }
    },
    computed: {
        ...mapState(["nowBreadcrumb"]),
    },
    created() {
        this.setNowBreadcrumb('insureOrder');
    },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/public/myHeader.scss";
</style>
